<template>
  <view :class="[ 'uni-row', typeClass , justifyClass, alignClass, ]" :style="{
		marginLeft:`${Number(marginValue)}rpx`,
		marginRight:`${Number(marginValue)}rpx`,
	}">
    <slot></slot>
  </view>
</template>

<script>
const ComponentClass = 'uni-row';
const modifierSeparator = '--';
/**
 * Row	布局-行
 * @description  流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局。
 * @tutorial  https://ext.dcloud.net.cn/plugin?id=3958
 *
 * @property  {gutter} type = Number 栅格间隔
 * @property  {justify} type = String flex 布局下的水平排列方式
 *            可选	start/end/center/space-around/space-between	start
 *            默认值	start
 * @property  {align} type = String flex 布局下的垂直排列方式
 *            可选	top/middle/bottom
 *            默认值	top
 * @property  {width} type = String|Number nvue下需要自行配置宽度用于计算
 *            默认值 750
 */


export default {
  name: 'uniRow',
  componentName: 'uniRow',
  // #ifdef MP-WEIXIN
  options: {
    virtualHost: true // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现，可使用flex布局
  },
  // #endif
  props: {
    type: String,
    gutter: Number,
    justify: {
      type: String,
      default: 'start'
    },
    align: {
      type: String,
      default: 'top'
    },
    // nvue如果使用span等属性，需要配置宽度
    width: {
      type: [String, Number],
      default: 750
    }
  },
  created() {
    // #ifdef APP-NVUE
    this.type = 'flex';
    // #endif
  },
  computed: {
    marginValue() {
      // #ifndef APP-NVUE
      if (this.gutter) {
        return -(this.gutter / 2);
      }
      // #endif
      return 0;
    },
    typeClass() {
      return this.type === 'flex' ? `${ComponentClass + modifierSeparator}flex` : '';
    },
    justifyClass() {
      return this.justify !== 'start' ? `${ComponentClass + modifierSeparator}flex-justify-${this.justify}` : ''
    },
    alignClass() {
      return this.align !== 'top' ? `${ComponentClass + modifierSeparator}flex-align-${this.align}` : ''
    }
  }
};
</script>

<style lang="scss">
$layout-namespace: ".uni-";
$row: $layout-namespace+"row";
$modifier-separator: "--";

@mixin utils-clearfix {
  $selector: &;

  @at-root {

    /* #ifndef APP-NVUE */
    #{$selector}::before,
    #{$selector}::after {
      display: table;
      content: "";
    }

    #{$selector}::after {
      clear: both;
    }

    /* #endif */
  }

}

@mixin utils-flex($direction: row) {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: $direction;
}

@mixin set-flex($state) {
  @at-root &-#{$state} {
    @content
  }
}

#{$row} {
  position: relative;
  flex-direction: row;

  /* #ifdef APP-NVUE */
  flex: 1;
  /* #endif */

  /* #ifndef APP-NVUE */
  box-sizing: border-box;
  /* #endif */

  // 非nvue使用float布局
  @include utils-clearfix;

  // 在QQ、字节、百度小程序平台，编译后使用shadow dom，不可使用flex布局，使用float
  @at-root {

    /* #ifndef MP-QQ || MP-TOUTIAO || MP-BAIDU */
    &#{$modifier-separator}flex {
      @include utils-flex;
      flex-wrap: wrap;
      flex: 1;

      &:before,
      &:after {
        /* #ifndef APP-NVUE */
        display: none;
        /* #endif */
      }

      @include set-flex(justify-center) {
        justify-content: center;
      }

      @include set-flex(justify-end) {
        justify-content: flex-end;
      }

      @include set-flex(justify-space-between) {
        justify-content: space-between;
      }

      @include set-flex(justify-space-around) {
        justify-content: space-around;
      }

      @include set-flex(align-middle) {
        align-items: center;
      }

      @include set-flex(align-bottom) {
        align-items: flex-end;
      }
    }

    /* #endif */
  }

}

// 字节、QQ配置后不生效
// 此处用法无法使用scoped
/* #ifdef MP-WEIXIN || MP-TOUTIAO || MP-QQ */
:host {
  display: block;
}

/* #endif */
</style>
